<script setup>
import {reactive, ref} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElText, ElLink, ElDialog} from 'element-plus';
import axios from "axios";

async function submitForm() {
  if (formRef.value) {
    try {
      await formRef.value.validate(); // 验证表单

      // 获取账户和密码
      const name = encodeURIComponent(form.value.name); // 编码URL字符
      const phone = encodeURIComponent(form.value.phone);
      const password = encodeURIComponent(form.value.password); // 编码URL字符
      const password1 = encodeURIComponent(form.value.password1); // 编码URL字符

      // 发送POST请求
      await axios.post(`http://localhost:918/manager/register?name=${name}&phone=${phone}&password=${password}&password1=${password1}`, {
        // 将账户和密码放在请求体中
        account: form.value.name,
        phone: form.value.phone,
        password: form.value.password,
        password1: form.value.password1,
      })
          .then(response => {
            if (response.status === 200) { // 检查HTTP状态码
              if (response.data.status === "success") {
                //window.location.href = '/';
                centerDialogVisible.value = true;
                alert('注册成功!');
              } else {
                alert('用户名或密码错误!');
              }
            }
          })
          .catch(error => {
            console.error('注册失败:', error);
            alert('注册失败，请稍后再试!');
          });
    } catch (error) {
      // 处理validate或其他异步操作中的错误
      console.error('表单验证失败:', error);
    }
  }
}

async function fetchAccount() {
  try {
    const response = await axios.get('http://localhost:918/manager/getall');
    if (response.status === 200) {
      // 假设返回的数据在response.data中，并且response.data是一个包含多个账户的数组
      let foundAccount = null; // 用于存储找到的账户
      let accountObj = null; // 用于遍历数组中的每个对象
      // 遍历账户数组来查找匹配的账户
      // 假设response.data是一个对象数组
      for (const accountObj of response.data) {
        if (accountObj.name === form.value.name) {
          foundAccount = accountObj.account; // 提取account字段
          break; // 找到后退出循环
        }
      }

      // 如果找到了匹配的账户，则更新响应式引用
      if (foundAccount) {
        foundAccountRef.value = foundAccount;
        DialogVisible.value = true;
        console.log('Account found:', foundAccount);
        console.log('Account found2:', foundAccountRef.value);
      } else {
        console.error('Account not found!');
      }
    } else {
      console.error('Failed to fetch account:', response.status);
    }
  } catch (error) {
    console.error('Error fetching account:', error);
  }
}

const foundAccountRef = ref(null);
const formRef = ref(null)
const form = ref({
  name: '',
  phone: '',
  password: '',
  password1: '',
});
const DialogVisible = ref(false);
const centerDialogVisible = ref(false);
const registerFailedVisible = ref(false);

function validatePassword(rule, value, callback) {
  if (!value) {
    return callback(new Error('请输入密码'));
  }

  // 正则表达式检查是否包含大写字母、小写字母和数字
  const hasUpperCase = /[A-Z]/.test(value);
  const hasLowerCase = /[a-z]/.test(value);
  const hasNumber = /\d/.test(value);

  // 至少需要两种类型
  const typesCount = (hasUpperCase ? 1 : 0) + (hasLowerCase ? 1 : 0) + (hasNumber ? 1 : 0);

  if (typesCount < 2) {
    callback(new Error('密码至少包含大写字母、小写字母和数字中的两种'));
  } else {
    callback();
  }
}

const rules = {
  name: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入电话号码', trigger: 'blur'},
    {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'},
  ],
  password: [
    {validator: validatePassword, trigger: 'blur'},
    {min: 8, max: 12, message: '长度在 8 到 12 个字符', trigger: 'blur'},
  ],
  password1: [
    {
      validator: (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== form.value.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
};

</script>

<template>
  <div class="background-image-container">
    <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
      <el-form
          class="form-with-border"
          :model="form"
          :rules="rules"
          ref="formRef"
          status-icon
          label-width="auto"
          style="max-width: 400px"
      >
        <div style="display: flex; justify-content: center; align-items: center;margin-bottom: 10px">
          <el-text class="text">行远.注册</el-text>
        </div>
        <el-form-item prop="name">
          <el-input
              v-model="form.name"
              style="width: 400px;height: 40px"
              placeholder="用户名"
              autocomplete="name"
              clearable
          />
        </el-form-item>
        <el-form-item prop="phone">
          <el-input
              v-model="form.phone"
              style="width: 400px;height: 40px"
              placeholder="电话"
              autocomplete="phone"
              clearable
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="form.password"
              style="width: 400px;height: 40px"
              type="password"
              placeholder="密码"
              autocomplete="password"
              show-password
          />
        </el-form-item>
        <el-form-item prop="password1">
          <el-input
              v-model="form.password1"
              style="width: 400px;height: 40px"
              type="password"
              placeholder="再次确认密码"
              autocomplete="check-password"
              show-password
          />
        </el-form-item>
        <el-form-item>
          <div class="button-container" style="display: flex; justify-content: center; align-items: center; ">
            <el-button type="primary"
                       style="width: 350px;height: 40px;font-size: 25px;border-radius: 14px;"
                       plain @click="submitForm"
            >
              注册
            </el-button>
          </div>
        </el-form-item>
        <div class="button-container" style="display: flex; justify-content: center; align-items: center; ">
          <el-text style="font-size: 25px">已经有帐号了？</el-text>
          <el-link :underline="true" style="font-size: 25px" type="danger" @click="$router.push('/')" target="_self">
            登录
          </el-link>
        </div>
        <div>
          <el-dialog v-model="centerDialogVisible" width="500" center
                     style="border-radius: 14px; box-shadow: 2px 0 3px rgba(0,0,0,0.4);">
    <div style="font-size: 25px;text-align: center" >
      恭喜你注册成功！
    </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button type="primary" style="width: 100px;height: 40px;font-size: 25px" @click="fetchAccount">
                  账号
                </el-button>
              </div>
            </template>
          </el-dialog>
          <el-dialog
              v-model="registerFailedVisible"
              title="错误"
              width="500">
            <span>表单验证失败，请检查您的输入！</span>
            <span>
      <el-button @click="registerFailedVisible = false">关 闭</el-button>
    </span>
          </el-dialog>

          <el-dialog v-model="DialogVisible" width="500" center
                     style="border-radius: 14px; box-shadow: 2px 0 3px rgba(0,0,0,0.4);">
    <span style="font-size: 25px;">
      你的账号是：{{foundAccountRef}}
    </span>
            <div class="button-container">
              <el-button type="primary"
                         style="width: 100px; height: 40px; font-size: 25px;"
                         @click="$router.push('/')"
                         target="_self">
                去登录
              </el-button>
            </div>
          </el-dialog>
        </div>
      </el-form>
    </div>
  </div>

</template>


<style scoped>
.el-link {
  margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}

.background-image-container {
  background-image: url('@/assets/register.png');
  background-size: cover; /* 或者使用其他值，如contain、100% 100%等 */
  background-position: center;
}

.form-with-border {
  /* 设置边框的样式 */
  border: 2px solid #333333; /* 边框宽度为2px，样式为实线，颜色为黑色 */
  /* 为了让边框看起来更完整，通常还需要设置一些内边距和外边距 */
  padding: 20px; /* 内边距 */
  margin: 20px; /* 外边距 */
  /* 为了让边框看起来更美观，你可以添加一些圆角 */
  border-radius: 14px; /* 边框圆角 */
  /* 还可以添加阴影效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  height: 450px;
  width: 600px;
}

.text {
  font-size: 50px; /* 使用像素 */
  font-weight: bold;
}

.button-container {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 在主轴上居中（默认是水平方向） */
  align-items: center; /* 在交叉轴上居中（如果父容器高度固定，则垂直居中） */
  width: 100%; /* 根据需要设置宽度 */
}

* {
  box-sizing: border-box;
  /*改变所有元素的盒模型（box model）的计算方式。
  在CSS中，盒模型是描述元素如何布局在页面上的一种方式。
  传统上，CSS的盒模型由四个部分组成：内容（content）、
  内边距（padding）、边框（border）和外边距（margin）。
  默认情况下，元素的宽度和高度只包括内容（content）部分，
  内边距（padding）和边框（border）会额外增加元素的最终尺寸。*/
}


body {
  color: #333;
  font-size: 14px;
  margin: 0;
  padding: 0;
  /*定义了一个元素的字体大小、
  外边距（margin）和内边距（padding）的样式。*/
}
</style>